<template>
	<view class="QRcode-container">
		<view class="card">
			<view class="topBox">
				<view class="infoBox">
					<view class="left">
						<view class="name">
							<text>访客：{{visitor.visitorName}}</text>
						</view>
						<view class="home">
							<text>预约日期：{{visitor.appointment}}</text>
						</view>
					</view>
					<view class="right">
						<image src="../../../static/Icon/global/LoginLogo.jpg"></image>
					</view>
				</view>
				<view class="tel">
					Tel: {{visitor.visitorPhone}}
				</view>
			</view>
			<view class="bottomBox">
				<view class="QRimage">
					<image :src="QRcode_src"></image>
				</view>
			</view>
			<text class="info">向访客分享此二维码</text>
			<text class="info">访客可凭此二维码</text>
			<text class="info">在预约时间内进出社区</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				QRcode_src: '',
				visitor: {
				  visitorSignkey: '',
				  ownerSignkey: '',
				  visitorName: 'asd',
				  visitorPhone: '123',
				  appointment: '123',
				  visiting: '',
				  createTime: ''
				}
			};
		},
		onLoad(opt){
			// console.log(opt)
			const visitorSignkey = opt.visitorSignkey
			this.getQRCode(visitorSignkey)
			this.getVisitorInfo(visitorSignkey)
		},
		methods:{
			getQRCode(visitorSignkey){
				this.QRcode_src = 'http://localhost:9001/owner/visitor/getVisitorQrCode/'+visitorSignkey || ''
			},
			getVisitorInfo(visitorSignkey){
				this.$myReq({
					url: `/owner/visitor/visitor/${visitorSignkey}`
				})
				.then((res) => {
					// console.log(res)
					this.visitor = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f9fc;
	}
	.QRcode-container{
		padding: 60rpx 30rpx 0rpx 30rpx;
	}
	.card{
		border-radius: 30rpx;
		background-image: url(https://s4.ax1x.com/2021/12/19/TVWb7R.png);
		background-repeat: no-repeat;
		background-size: 120%;
		background-position: 50% -10%;
		background-color: white;
		height: 1100rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #707070;
		.topBox{
			position: relative;
			height: 300rpx;
			padding: 30rpx 40rpx 0rpx 40rpx;
			.infoBox{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.left{
					color: white;
					.name{
						margin-bottom: 20rpx;
						text:nth-child(1){
							margin-right: 30rpx;
						}
						text{
							font-size: 50rpx;
						}
					}
					.home{
						text{
							font-size: 30rpx;
							margin-right: 20rpx;
						}
					}
				}
				.right{
					image{
						border-radius: 20rpx;
						height: 120rpx;
						width: 120rpx;
					}
				}
			}
			.tel{
				position: absolute;
				bottom: 40rpx;
				color: white;
				font-size: 35rpx;
			}
		}
		.bottomBox{
			// border: 1px solid blue;
			height: 600rpx;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.QRimage{
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
				border: 10rpx solid black;
				display: flex;
				align-items: center;
				image{
					margin: 0 auto;
					width: 90%;
					height: 90%;
				}
			}
		}
		.info{
			width: 100%;
			display: inline-block;
			text-align: center;
			color: #9f9f9f;
		}
	}
</style>
